<script setup>
import email from '../../assets/email.png'
import lab from '../../assets/lab.jpg'

const contactInfo = {
  email: 'qyx20000602@163.com',
  labLink: 'https://quant-psyc-lab.mysxl.cn/',
  labName: '量化心理实验室'
}
</script>

<template>
  <div class="min-h-screen bg-gradient-to-br from-blue-50 to-indigo-100 flex flex-col items-center justify-center py-16 px-4">
    <div class="bg-white rounded-3xl shadow-xl p-10 max-w-2xl w-full border border-gray-100">
      <!-- 标题部分 -->
      <div class="text-center mb-10">
        <h1 class="text-4xl font-bold text-[#258aff] mb-4">联系我们</h1>
        <p class="text-gray-600 text-lg leading-relaxed">
          如果你有任何建议、合作意向或遇到问题，欢迎通过以下方式联系我们，我们会尽快回复你！
        </p>
      </div>

      <!-- 联系方式卡片 -->
      <div class="space-y-6">
        <!-- 邮箱联系方式 -->
        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-2xl p-6 border border-blue-100 hover:shadow-lg transition-all duration-300">
          <div class="flex items-center space-x-4">
            <div class="flex-shrink-0">
              <img :src="email" alt="邮箱图标" class="w-12 h-12 rounded-lg shadow-sm" />
            </div>
            <div class="flex-1">
              <h3 class="text-xl font-semibold text-gray-800 mb-2">邮箱联系</h3>
              <p class="text-gray-600 mb-3">通过邮件与我们取得联系，我们会在24小时内回复</p>
              <a 
                :href="`mailto:${contactInfo.email}`" 
                class="inline-flex items-center px-4 py-2 bg-[#258aff] text-white rounded-lg hover:bg-blue-600 transition-colors duration-200 text-sm font-medium"
              >
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 4.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path>
                </svg>
                {{ contactInfo.email }}
              </a>
            </div>
          </div>
        </div>

        <!-- 实验室网站 -->
        <div class="bg-gradient-to-r from-green-50 to-emerald-50 rounded-2xl p-6 border border-green-100 hover:shadow-lg transition-all duration-300">
          <div class="flex items-center space-x-4">
            <div class="flex-shrink-0">
              <img :src="lab" alt="实验室图标" class="w-64 h-16 rounded-lg shadow-sm object-cover" />
            </div>
            <div class="flex-1">
              <p class="text-gray-600 mb-3">访问我们的官方网站，了解更多关于心理测评和研究成果</p>
              <a 
                :href="contactInfo.labLink" 
                target="_blank" 
                rel="noopener noreferrer"
                class="inline-flex items-center px-4 py-2 bg-green-600 text-white rounded-lg hover:bg-green-700 transition-colors duration-200 text-sm font-medium"
              >
                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"></path>
                </svg>
                访问官网
              </a>
            </div>
          </div>
        </div>
      </div>

      <!-- 底部信息 -->
      <div class="mt-10 pt-8 border-t border-gray-200 text-center">
        <p class="text-gray-500 text-sm">
          感谢您对我们的关注与支持，期待与您的合作！
        </p>
      </div>
    </div>
  </div>
</template>

<style scoped>
/* 自定义样式 */
.bg-gradient-to-br {
  background: linear-gradient(135deg, #eff6ff 0%, #e0e7ff 100%);
}

/* 悬停效果增强 */
.hover\:shadow-lg:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
</style>